<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>姓名：{{name}}</p>
  <p>年龄：{{age}} <button @click="age++">过了一年</button></p>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    // 1. 通过reactive创建响应数据对象
    const state = reactive({
      name: 'jack',
      age: 18
    })
    // 2. 模板需要 state.name 可以简化下直接使用 name  (坑。。。。。)
    // return { ...state } === return { name, age }
    // 当你把响应式数据对象展开之后，就不是响应式数据了
    // console.log(state)
    // console.log({...state})
    // 发现：Proxy()包裹的响应式数据对象，展开（解构）之后没了，没有响应式效果

    // 3. vue3 提供 toRefs 函数，当你去 展开和解构的时候使用，保持原来的响应式
    // toRefs(state) 再去展开和解构的时候，保持响应式
    // 把对象中的每一个属性对应的数据，通过ref创建成了响应式数据，所以解构和展开后可以保持响应式
    return { ...toRefs(state) }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
